<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/resources/lib/jquery.min.js"></script>
<script type="text/javascript" src="/resources/lib/jquery.jqplot.js"></script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.cursor.js"></script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.pieRenderer.js"></script>
<link rel="stylesheet" type="text/css"
	href="/resources/lib/jquery.jqplot.min.css" />
<!--  <head>
<script type="text/javascript" src="/resources/lib/jquery.min.js"></script>
<script type="text/javascript" src="/resources/lib/jquery.jqplot.js"></script>
<script type="text/javascript"
	src=>"/resources/lib/plugins/jqplot.categoryAxisRenderer.js"</script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.cursor.js"></script>
<script type="text/javascript"
	src="/resources/lib/plugins/jqplot.pieRenderer.js"></script>
<link rel="stylesheet" type="text/css"
	href="/resources/lib/jquery.jqplot.min.css"/> -->
 
 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	data = {
		"Bills & Utilities" : 1019.11,
		"Uncategorized" : 196.57,
		"Home" : 30.29,
		"Entertainment" : 300.0,
		"Food & Dining" : 465.45,
		"Personal Care" : 63.92,
		"Auto & Transport" : 571.44
	};

	jqData = []
	$.each(data, function(k, v) {
		jqData.push([ k, v ]);
	});

	plot = jQuery.jqplot('chart1', [ jqData ], {
		title : ' ',
		//dataRenderer: $.jqplot.ciParser,
		seriesDefaults : {
			shadow : true,
			renderer : $.jqplot.PieRenderer,
			rendererOptions : {
				fill : false,
				sliceMargin : 4,
				showDataLabels : true
			}
		},
		legend : {
			show : true
		}
	});

	var imgData = $('#chart1').jqplotToImageStr({});
	var imgElem = $('<img/>').attr('src', imgData);
	$('#imgChart1').append(imgElem);
</script>
<title>Insert title here</title>
</head>
<body>
	<div id="chart1"
		style="margin-top: 20px; margin-left: 20px; width: 600px; height: 300px;"></div>

	<div id="imgChart1"></div>
</body>
</html>